<template>
	<div class="user-box">
		<el-form :model="userForm" :rules="userRules" ref="userFormRef" label-width="68px" class="user-form">
			<el-form-item label="用户名" prop="userName">
				<el-input type="text" v-model="userForm.userName" placeholder="请输入账号"></el-input>
			</el-form-item>
			<el-form-item label="密码" prop="userPassword">
				<el-input v-model="userForm.userPassword" type="password" placeholder="请输入密码">
				</el-input>
			</el-form-item>
			<el-form-item label="邮箱" prop="userEmail">
				<el-input v-model="userForm.userEmail" type="text" placeholder="请输入邮箱">
				</el-input>
			</el-form-item>
			<el-form-item label="角色" prop="userRole">
				<el-input v-model="userForm.userRole" type="text" placeholder="请输入角色">
				</el-input>
			</el-form-item>
			<el-form-item>
				<el-button type="primary" @click="handleSubmit(userFormRef)">确定</el-button>
			</el-form-item>
		</el-form>
	</div>
</template>

<script setup>
	import {
		ElMessage
	} from 'element-plus'
	import axios from 'axios';
	import {
		ref,
		reactive,
		onMounted,
		watch
	} from 'vue'

	import {
		useRouter
	} from 'vue-router'
	// 路由实例对象
	const router = useRouter()

	// 初始化响应式表单对象
	const userForm = ref({
		userId: null,
		userName: '',
		userPassword: '',
		userEmail: '',
		userRole: ''
	})
	const userFormRef = ref()
	// 表单校验规则
	const userRules = reactive({
		userName: [{
			required: true,
			message: '请输入账号',
			trigger: 'blur'
		}],
		userPassword: [{
			required: true,
			message: '请输入密码',
			trigger: 'blur'
		}],
		userEmail: [{
			required: true,
			message: '请输入邮箱',
			trigger: 'blur'
		}],
		userRole: [{
			required: true,
			message: '请输入角色',
			trigger: 'blur'
		}],
	})
	// 获取父组件传递过来的参数
	const props = defineProps(['userName'])
	// 自定义事件
	const emits = defineEmits(['refreshEvent','updateUserName'])

	// 依据用户Name 查询用户信息
	const getUserInfo = (userName) => {
		if (userName) {
			axios.get('/api/script/user/name/' + userName).then(res => {
				userForm.value = res.data.data
			}).catch(err => {})
		}
	}
	// 监听传递过来的用户Name
	watch(() => props.userName, (newVal, oldVal) => {
		getUserInfo(newVal)
	}, {
		immediate: true,
		deep: true
	})

	// 监听点击确定按钮时 执行的方法
	const handleSubmit = async (formEl) => {
		if (!formEl) return
		await formEl.validate((valid, fields) => {
			if (valid) {
				// 校验成功 调用编辑接口
				handleEdit()
			}
		})
	}
	const handleEdit = () => {
	  axios.put('api/script/user/edit', userForm.value)
	    .then(res => {
	      if (res.data.code === 200) {
	        ElMessage({
	          message: '编辑成功',
	          type: 'success'
	        });
			localStorage.setItem('user_name', userForm.value.userName);
	        // 关闭弹窗
	        emits('refreshEvent',userForm.value.userName);
	      } else {
	        ElMessage({
	          message: '编辑失败: ' + res.data.msg,
	          type: 'error'
	        });
	      }
	    })
	    .catch(err => {
	      ElMessage({
	        message: '网络请求错误: ' + err.message,
	        type: 'error'
	      });
	    });
	};
</script>

<style scoped>
	.user-box {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 100%;
	}

	.user-form {
		width: 400px;
		padding: 20px;
		border-radius: 5px;
	}
</style>